﻿@model Nop.Plugin.Widgets.BootstrapCarousel.Models.PublicInfoModel
@{
    Layout = "";
}
@using System
@using System.Text
@using Nop.Web.Framework.UI

@helper RenderIndicatorLine(string pictureUrl, bool isFirst, int slideNum)
{
    string activeClass = "";

    if (!string.IsNullOrEmpty(pictureUrl))
    {
        if (isFirst)
        {
            activeClass = "class=\"active\"";
        }
        
        <li data-target="#carousel" data-slide-to="@slideNum" @Html.Raw(activeClass)></li>
    }
}

@helper RenderSliderLine(string pictureUrl, string altText, string headingText, string promotionText, string link, bool isFirst)
{

    string activeClass = "";

    if (!string.IsNullOrEmpty(pictureUrl))
    {
        if (isFirst)
        {
            activeClass = "active";
        }
    }

    StringBuilder caption = new StringBuilder();
    if (!string.IsNullOrEmpty(headingText) && !string.IsNullOrEmpty(promotionText))
    {
        caption.Append("<div class=\"carousel-caption\">");
        caption.AppendLine();
        if (!string.IsNullOrEmpty(headingText))
        {
            caption.Append("<h3>"+@headingText+"</h3>");
            caption.AppendLine();
        }
        if (!string.IsNullOrEmpty(promotionText))
        {
            caption.Append("<p>"+@promotionText+"</p>");
            caption.AppendLine();
        }
        caption.Append("</div>");
    }

    if (!string.IsNullOrEmpty(pictureUrl))
    {
        if (!string.IsNullOrEmpty(link))
        {
            <div class="item @activeClass">
                <a href="@link">
                    <img src="@pictureUrl" alt="@altText">
                </a>
                @Html.Raw(caption)
           </div>
        }
        else
        {
            <div class="item @activeClass">
                <img src="@pictureUrl" alt="@altText">
                @Html.Raw(caption)
            </div>
        }
    }
}
<!-- carousel -->
<div class="bootstrap-carousel row">
    <div class="col-sm-12">
        <div id="carousel" class="carousel slide" data-ride="carousel">
            <ol class="carousel-indicators">
            @RenderIndicatorLine(Model.Picture1Url, true ,0)
            @RenderIndicatorLine(Model.Picture2Url, false ,1)
            @RenderIndicatorLine(Model.Picture3Url, false ,2)
            @RenderIndicatorLine(Model.Picture4Url, false ,3)
            </ol>
            <div class="carousel-inner">
            @RenderSliderLine(Model.Picture1Url, Model.AltText1, Model.HeadingText1, Model.PromotionText1, Model.Link1, true)
            @RenderSliderLine(Model.Picture2Url, Model.AltText2, Model.HeadingText2, Model.PromotionText2, Model.Link2, false)
            @RenderSliderLine(Model.Picture3Url, Model.AltText3, Model.HeadingText3, Model.PromotionText3, Model.Link3, false)
            @RenderSliderLine(Model.Picture4Url, Model.AltText4, Model.HeadingText4, Model.PromotionText4, Model.Link4, false)
            </div>
            <a class="left carousel-control" href="#carousel" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left"></span>
            </a>
            <a class="right carousel-control" href="#carousel" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right"></span>
            </a>
        </div>
    </div>
</div>
<!-- /carousel -->
<script type="text/javascript">
    $(window).load(function () {
        $('.carousel').carousel({
            interval: 4000
        })
    });
</script>
